<template>

  <div class="model">
    <div class="mask"></div>
    <div class="model-dialog">
      <div class="model-header">
        <span>实时台风数据</span>
        
      </div>
      <div class="model-body">
       

          <table>
       
        <tbody>
            <tr>
                <td>编号</td> <td> {{infodata.strong||""}}</td> <td>等级</td><td> {{infodata.power||''}}</td>
            </tr>
            <tr>
                <td>名称</td> <td colspan="3">  无敌小台风   </td> 
            </tr>

            <tr>
                <td>时间</td> <td colspan="3">  {{infodata.time}}  </td> 
            </tr>
            <tr>
                <td>位置</td> <td colspan="3"> {{infodata.lng}}  {{infodata.lat}}   </td> 
            </tr>
            <tr>
                <td>气压</td> <td> {{infodata.pressure}}</td> <td>风力</td> <td>巨大</td>
            </tr>
        
            
       </tbody>
   </table>



        
      </div>
    
    </div>
  </div>


</template>
<script lang="ts">


export default{
props:['infodata'],


}



</script>

<style>
.mask {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(167, 165, 165, 0.9);
  opacity: 0.5;
  z-index: 9;
}
.model-dialog {
  position: absolute;
  /* transform: translate(-50%, -50%); */
  background-color: rgba(167, 165, 165, 0.9);
  border-radius: 12px;
  width: 300px;
  height: 150px;
  border: 1px solid #f5f5f5;
  overflow: hidden;
  z-index: 10;
}
.model-header {
  position: relative;
  height: 20px;
  padding-left: 10px;
  padding-top: 10px;
  /* font-size: 20px; */
  /* line-height: 20px; */
  background-color: rgba(0, 165, 165, 0.5);
  border-bottom: 1px solid rgb(177, 176, 176);
}
.model-body {
  height: 250px;
  /* line-height: 150px; */
  font-size: 28px;
  /* text-align: center; */
  background-color: rgba(0, 25, 255, 0.1);
}
table{
  width: 100%;
  font-size: small;
  border: 2px solid;
}
tr td,th{

border:1px solid white;

}



.mt{

border-collapse:collapse;

border:1px solid black; /*设置表格的外边框*/

}





</style>
